<template>
  <div class="messages-container">
    <!-- 使用通用头部组件 -->
    <AppHeader />

    <!-- 消息中心主内容 -->
    <main class="messages-main">
      <div class="messages-wrapper">
        <!-- 消息导航侧边栏 -->
        <aside class="messages-sidebar">
          <div class="message-tabs">
            <button class="message-tab" :class="{ active: activeTab === 'all' }" @click="activeTab = 'all'">
              <span class="tab-icon">📋</span>
              <span class="tab-text">全部消息</span>
              <span class="tab-badge" v-if="unreadCount > 0">{{ unreadCount }}</span>
            </button>
            <button class="message-tab" :class="{ active: activeTab === 'system' }" @click="activeTab = 'system'">
              <span class="tab-icon">📢</span>
              <span class="tab-text">系统通知</span>
              <span class="tab-badge" v-if="systemUnread > 0">{{ systemUnread }}</span>
            </button>
            <button class="message-tab" :class="{ active: activeTab === 'purchase' }" @click="activeTab = 'purchase'">
              <span class="tab-icon">🛒</span>
              <span class="tab-text">购买消息</span>
              <span class="tab-badge" v-if="purchaseUnread > 0">{{ purchaseUnread }}</span>
            </button>
            <button class="message-tab" :class="{ active: activeTab === 'comments' }" @click="activeTab = 'comments'">
              <span class="tab-icon">💬</span>
              <span class="tab-text">评论与@</span>
              <span class="tab-badge" v-if="commentsUnread > 0">{{ commentsUnread }}</span>
            </button>
            <button class="message-tab" :class="{ active: activeTab === 'private' }" @click="activeTab = 'private'">
              <span class="tab-icon">💌</span>
              <span class="tab-text">用户私信</span>
              <span class="tab-badge" v-if="privateUnread > 0">{{ privateUnread }}</span>
            </button>
          </div>
        </aside>

        <!-- 消息内容区域 -->
        <div class="messages-content">
          <!-- 全部消息 -->
          <div v-if="activeTab === 'all'" class="all-messages">
            <div class="messages-header-section">
              <h2>全部消息</h2>
            </div>
            
            <div class="messages-list">
              <div v-for="message in allMessages" :key="message.id" class="message-item" :class="{ unread: !message.read }" @click="markMessageAsRead(message)">
                <div class="message-icon">{{ getMessageIcon(message.type) }}</div>
                <div class="message-content">
                  <div class="message-header">
                    <span class="message-type">{{ getMessageTypeText(message.type) }}</span>
                    <span class="message-time">{{ message.time }}</span>
                  </div>
                  <div class="message-text">
                    {{ message.content }}
                    <template v-if="message.link">
                      <a href="#" class="message-link">{{ message.link }}</a>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 系统通知 -->
          <div v-else-if="activeTab === 'system'" class="system-messages">
            <div class="messages-header-section">
              <h2>系统通知</h2>
            </div>
            
            <div class="messages-list">
              <div v-for="message in systemMessages" :key="message.id" class="message-item" :class="{ unread: !message.read }" @click="markAsRead('system', message.id)">
                <div class="message-icon">📢</div>
                <div class="message-content">
                  <div class="message-header">
                    <span class="message-type">系统通知</span>
                    <span class="message-time">{{ message.time }}</span>
                  </div>
                  <div class="message-text">
                    {{ message.content }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 评论与@ -->
          <div v-else-if="activeTab === 'comments'" class="comments-messages">
            <div class="messages-header-section">
              <h2>评论与@</h2>
            </div>
            
            <div class="messages-list">
              <div v-for="message in commentsMessages" :key="message.id" class="message-item" :class="{ unread: !message.read }" @click="markAsRead('comments', message.id)">
                <div class="message-icon">💬</div>
                <div class="message-content">
                  <div class="message-header">
                    <span class="message-sender">{{ message.sender }}</span>
                    <span class="message-time">{{ message.time }}</span>
                  </div>
                  <div class="message-text">
                    {{ message.content }}
                    <template v-if="message.video">
                      <div class="commented-video">
                        <img :src="message.video.thumbnail" alt="视频封面" />
                        <span>{{ message.video.title }}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 购买消息 -->
          <div v-else-if="activeTab === 'purchase'" class="purchase-messages">
            <div class="messages-header-section">
              <h2>购买消息</h2>
            </div>
            
            <div class="messages-list">
              <div v-for="message in purchaseMessages" :key="message.id" class="message-item" :class="{ unread: !message.read }" @click="markAsRead('purchase', message.id)">
                <div class="message-icon">🛒</div>
                <div class="message-content">
                  <div class="message-header">
                    <span class="message-type">购买消息</span>
                    <span class="message-time">{{ message.time }}</span>
                  </div>
                  <div class="message-text">
                    {{ message.content }}
                    <template v-if="message.orderInfo">
                      <div class="order-info">
                        <span>订单号: {{ message.orderInfo.orderId }}</span>
                        <span>金额: ¥{{ message.orderInfo.amount }}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 用户私信 -->
          <div v-else-if="activeTab === 'private'" class="private-messages">
            <div class="messages-header-section">
              <h2>用户私信</h2>
              <button class="new-message" @click="openNewMessage">发起私信</button>
            </div>
            
            <div class="private-chats">
              <div v-for="chat in privateChats" :key="chat.id" class="private-chat-item" :class="{ unread: chat.unread > 0 }" @click="markChatAsRead(chat.id)">
                <div class="chat-avatar">
                  <img :src="chat.avatar" alt="用户头像" />
                  <span class="chat-badge" v-if="chat.unread > 0">{{ chat.unread }}</span>
                </div>
                <div class="chat-info">
                  <div class="chat-header">
                    <span class="chat-name">{{ chat.name }}</span>
                    <span class="chat-time">{{ chat.lastTime }}</span>
                  </div>
                  <div class="chat-preview">
                    {{ chat.lastMessage }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="app-footer">
      <div class="footer-content">
        <div class="footer-links">
          <a href="#">关于我们</a>
          <a href="#">联系我们</a>
          <a href="#">加入我们</a>
          <a href="#">帮助中心</a>
          <a href="#">隐私政策</a>
          <a href="#">用户协议</a>
        </div>
        <div class="copyright">
          © 2024 Noody. All Rights Reserved.
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/user'
import AppHeader from '../components/AppHeader.vue'

const router = useRouter()
const userStore = useUserStore()
const activeTab = ref('all')

// 将消息数据改为响应式对象
const systemMessages = ref([
  {
    id: 1,
    content: '恭喜您获得了创作者认证资格，点击查看详情。',
    time: '今天 10:30',
    read: false
  },
  {
    id: 2,
    content: '系统将于6月1日凌晨2点进行维护，预计持续2小时。',
    time: '昨天 18:30',
    read: false
  },
  {
    id: 3,
    content: '您的账户已成功升级为会员，享受更多特权！',
    time: '3天前',
    read: true
  }
])

const commentsMessages = ref([
  {
    id: 1,
    content: '非常喜欢你的视频，学到了很多东西！',
    time: '昨天 15:45',
    read: false,
    sender: '学习达人',
    video: {
      title: '【前端教程】Vue3基础入门',
      thumbnail: 'https://picsum.photos/id/1015/200/112'
    }
  },
  {
    id: 2,
    content: '@用户 这个问题你怎么看？',
    time: '昨天 10:20',
    read: true,
    sender: '讨论组组长',
    video: {
      title: '【技术讨论】前端框架对比',
      thumbnail: 'https://picsum.photos/id/1018/200/112'
    }
  }
])

const purchaseMessages = ref([
  {
    id: 1,
    content: '您的订单已发货，点击查看物流信息。',
    time: '今天 12:30',
    read: false,
    orderInfo: {
      orderId: '2024052001',
      amount: 99.9
    }
  },
  {
    id: 2,
    content: '您的会员已成功开通，有效期至2025年5月20日。',
    time: '昨天 09:15',
    read: false,
    orderInfo: {
      orderId: '2024051901',
      amount: 258.0
    }
  },
  {
    id: 3,
    content: '您的购买已完成，感谢您的支持！',
    time: '3天前',
    read: true,
    orderInfo: {
      orderId: '2024051801',
      amount: 128.0
    }
  }
])

const privateChats = ref([
  {
    id: 1,
    name: '小明同学',
    avatar: 'https://picsum.photos/id/1012/200/200',
    lastMessage: '你好，我想请教一个关于视频制作的问题',
    lastTime: '3天前',
    unread: 1
  },
  {
    id: 2,
    name: '技术讨论组',
    avatar: 'https://picsum.photos/id/1013/200/200',
    lastMessage: '每周技术分享活动即将开始，记得参加！',
    lastTime: '上周',
    unread: 0
  },
  {
    id: 3,
    name: '创意团队',
    avatar: 'https://picsum.photos/id/1014/200/200',
    lastMessage: '关于下一个项目，我们有新的想法想和你讨论',
    lastTime: '2周前',
    unread: 0
  }
])

// 合并所有消息数据
const allMessages = computed(() => {
  const messages = []
  
  // 添加系统消息
  systemMessages.value.forEach(msg => {
    messages.push({
      ...msg,
      type: 'system'
    })
  })
  
  // 添加评论消息
  commentsMessages.value.forEach(msg => {
    messages.push({
      ...msg,
      type: 'comment'
    })
  })
  
  // 添加购买消息
  purchaseMessages.value.forEach(msg => {
    messages.push({
      ...msg,
      type: 'purchase'
    })
  })
  
  // 添加私信
  privateChats.value.forEach(chat => {
    if (chat.lastMessage) {
      messages.push({
        id: chat.id,
        type: 'private',
        content: chat.lastMessage,
        time: chat.lastTime,
        read: chat.unread === 0,
        sender: chat.name
      })
    }
  })
  
  // 按时间排序（最新的在前）
  return messages.sort((a, b) => {
    // 简化的时间排序，实际项目中可能需要更复杂的时间比较
    const timeOrder = ['今天', '昨天', '前天', '3天前', '上周', '2周前']
    const aIndex = timeOrder.indexOf(a.time.split(' ')[0])
    const bIndex = timeOrder.indexOf(b.time.split(' ')[0])
    return aIndex - bIndex
  })
})

// 从localStorage加载消息状态
const loadMessageStates = () => {
  try {
    const savedStates = localStorage.getItem('messageStates')
    if (savedStates) {
      const states = JSON.parse(savedStates)
      // 恢复系统消息状态
      if (states.systemMessages) {
        states.systemMessages.forEach(savedMsg => {
          const msg = systemMessages.value.find(m => m.id === savedMsg.id)
          if (msg) msg.read = savedMsg.read
        })
      }
      // 恢复评论消息状态
      if (states.commentsMessages) {
        states.commentsMessages.forEach(savedMsg => {
          const msg = commentsMessages.value.find(m => m.id === savedMsg.id)
          if (msg) msg.read = savedMsg.read
        })
      }
      // 恢复购买消息状态
      if (states.purchaseMessages) {
        states.purchaseMessages.forEach(savedMsg => {
          const msg = purchaseMessages.value.find(m => m.id === savedMsg.id)
          if (msg) msg.read = savedMsg.read
        })
      }
      // 恢复私信状态
      if (states.privateChats) {
        states.privateChats.forEach(savedChat => {
          const chat = privateChats.value.find(c => c.id === savedChat.id)
          if (chat) chat.unread = savedChat.unread
        })
      }
    }
  } catch (error) {
    console.error('加载消息状态失败:', error)
  }
}

// 保存消息状态到localStorage
const saveMessageStates = () => {
  try {
    const states = {
      systemMessages: systemMessages.value.map(msg => ({ id: msg.id, read: msg.read })),
      commentsMessages: commentsMessages.value.map(msg => ({ id: msg.id, read: msg.read })),
      purchaseMessages: purchaseMessages.value.map(msg => ({ id: msg.id, read: msg.read })),
      privateChats: privateChats.value.map(chat => ({ id: chat.id, unread: chat.unread }))
    }
    localStorage.setItem('messageStates', JSON.stringify(states))
  } catch (error) {
    console.error('保存消息状态失败:', error)
  }
}

// 计算未读消息数量
const systemUnread = computed(() => {
  return systemMessages.value.filter(msg => !msg.read).length
})

const commentsUnread = computed(() => {
  return commentsMessages.value.filter(msg => !msg.read).length
})

const purchaseUnread = computed(() => {
  return purchaseMessages.value.filter(msg => !msg.read).length
})

const privateUnread = computed(() => {
  return privateChats.value.reduce((sum, chat) => sum + chat.unread, 0)
})

const unreadCount = computed(() => {
  return systemUnread.value + commentsUnread.value + purchaseUnread.value + privateUnread.value
})

// 根据消息类型获取图标
const getMessageIcon = (type) => {
  switch (type) {
    case 'system': return '📢'
    case 'comment': return '💬'
    case 'purchase': return '🛒'
    case 'private': return '💌'
    default: return '📋'
  }
}

// 根据消息类型获取文本
const getMessageTypeText = (type) => {
  switch (type) {
    case 'system': return '系统通知'
    case 'comment': return '评论'
    case 'purchase': return '购买消息'
    case 'private': return '私信'
    default: return '消息'
  }
}

// 初始化时加载用户信息和消息状态
onMounted(() => {
  userStore.loadUser()
  loadMessageStates() // 加载保存的消息状态
  
  // 如果用户未登录，重定向到登录页
  if (!userStore.isLoggedIn) {
    router.push('/')
  }
})

// 用户菜单相关功能已在AppHeader组件中实现

// 标记单条消息为已读
const markMessageAsRead = (message) => {
  // 更新原始消息数据中的read状态
  if (message.type === 'system') {
    const msg = systemMessages.value.find(m => m.id === message.id)
    if (msg && !msg.read) {
      msg.read = true
      saveMessageStates() // 保存状态到localStorage
    }
  } else if (message.type === 'comment') {
    const msg = commentsMessages.value.find(m => m.id === message.id)
    if (msg && !msg.read) {
      msg.read = true
      saveMessageStates() // 保存状态到localStorage
    }
  } else if (message.type === 'purchase') {
    const msg = purchaseMessages.value.find(m => m.id === message.id)
    if (msg && !msg.read) {
      msg.read = true
      saveMessageStates() // 保存状态到localStorage
    }
  } else if (message.type === 'private') {
    markChatAsRead(message.id)
  }
}

// 标记特定类型的消息为已读
const markAsRead = (type, id) => {
  if (type === 'system') {
    const msg = systemMessages.value.find(m => m.id === id)
    if (msg && !msg.read) {
      msg.read = true
      saveMessageStates() // 保存状态到localStorage
    }
  } else if (type === 'comments') {
    const msg = commentsMessages.value.find(m => m.id === id)
    if (msg && !msg.read) {
      msg.read = true
      saveMessageStates() // 保存状态到localStorage
    }
  } else if (type === 'purchase') {
    const msg = purchaseMessages.value.find(m => m.id === id)
    if (msg && !msg.read) {
      msg.read = true
      saveMessageStates() // 保存状态到localStorage
    }
  }
}

// 标记聊天为已读
const markChatAsRead = (chatId) => {
  const chat = privateChats.value.find(c => c.id === chatId)
  if (chat && chat.unread > 0) {
    chat.unread = 0
    saveMessageStates() // 保存状态到localStorage
  }
}

// 打开发起私信对话框
const openNewMessage = () => {
  alert('发起私信功能已点击，可以在这里实现私信发送界面')
  // 实际项目中可以实现一个模态框或跳转到私信发送页面
}



// 在mounted中更新allMessages
onMounted(() => {
  userStore.loadUser()
  
  // 如果用户未登录，重定向到登录页
  if (!userStore.isLoggedIn) {
    router.push('/')
  }
})
</script>

<style scoped>
/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* 容器样式 */
.messages-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 - 与其他页面保持一致 */
.messages-header {
  background-color: white;
  border-bottom: 1px solid #e8f5e9;
  padding: 10px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.logo {
  font-size: 24px;
  font-weight: 700;
  color: #4CAF50;
  margin: 0;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-image {
  margin-left: 10px;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.main-nav ul {
  display: flex;
  list-style: none;
}

.main-nav li {
  margin: 0 15px;
}

.main-nav a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 0;
  position: relative;
}

.main-nav a:hover {
  color: #4CAF50;
}

.user-actions {
  display: flex;
  align-items: center;
}

.search-box {
  display: flex;
  margin-right: 20px;
}

.search-box input {
  width: 200px;
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 20px 0 0 20px;
  font-size: 14px;
}

.search-button {
  padding: 8px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  font-size: 14px;
}

.notification-button {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 20px;
  font-size: 20px;
  transition: transform 0.3s;
}

.notification-button.active {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #4CAF50;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
}

.user-profile {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
}

.username {
  font-size: 14px;
  font-weight: 500;
  margin-right: 5px;
}

.dropdown-icon {
  font-size: 12px;
  color: #666;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  z-index: 1000;
}

.user-dropdown ul {
  list-style: none;
}

.user-dropdown li {
  padding: 0;
}

.user-dropdown a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.user-dropdown a:hover {
  background-color: #f5f5f5;
}

/* 消息中心主要内容 */
.messages-main {
  flex: 1;
}

.messages-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
}

/* 消息导航侧边栏 */
.messages-sidebar {
  width: 250px;
  margin-right: 20px;
}

.message-tabs {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-tab {
  width: 100%;
  padding: 15px 20px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.3s;
  font-size: 16px;
  color: #666;
  text-align: left;
}

.message-tab:hover {
  background-color: #f5f5f5;
}

.message-tab.active {
  background-color: #e8f5e9;
  color: #4CAF50;
  font-weight: 500;
}

.tab-icon {
  font-size: 20px;
  margin-right: 15px;
  width: 24px;
  text-align: center;
}

.tab-text {
  flex: 1;
}

.tab-badge {
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  min-width: 20px;
  text-align: center;
}

/* 消息内容区域 */
.messages-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.messages-header-section {
  padding: 20px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.messages-header-section h2 {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.mark-all-read {
  padding: 8px 16px;
  background-color: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.mark-all-read:hover {
  background-color: #e0e0e0;
}

.new-message {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.new-message:hover {
  background-color: #45a049;
}

/* 消息列表 */
.messages-list {
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.message-item {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: flex-start;
}

.message-item:hover {
  background-color: #fafafa;
}

.message-item.unread {
  background-color: #f1f8e9;
}

.message-icon {
  font-size: 24px;
  margin-right: 15px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.message-type {
  font-weight: 500;
  color: #4CAF50;
  font-size: 14px;
}

.message-sender {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.message-time {
  font-size: 12px;
  color: #999;
}

.message-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.message-link {
  color: #4CAF50;
  text-decoration: none;
  margin-left: 5px;
}

.message-link:hover {
  text-decoration: underline;
}

.commented-video {
  margin-top: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.commented-video img {
  width: 60px;
  height: 34px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 2px;
}

.commented-video span {
  font-size: 13px;
  color: #666;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 订单信息样式 */
.order-info {
  margin-top: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
}

.order-info span {
  font-size: 13px;
  color: #666;
}

/* 私信聊天列表 */
.private-chats {
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.private-chat-item {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
}

.private-chat-item:hover {
  background-color: #fafafa;
}

.private-chat-item.unread {
  background-color: #f1f8e9;
}

.chat-avatar {
  position: relative;
  margin-right: 15px;
}

.chat-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #4CAF50;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  padding: 2px 7px;
  min-width: 20px;
  text-align: center;
}

.chat-info {
  flex: 1;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.chat-name {
  font-weight: 500;
  color: #333;
  font-size: 16px;
}

.chat-time {
  font-size: 12px;
  color: #999;
}

.chat-preview {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 页脚 */
.app-footer {
  background-color: #2c2c2c;
  color: #999;
  padding: 30px 0;
  margin-top: 50px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-links a {
  color: #999;
  text-decoration: none;
  margin: 0 15px;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #fff;
}

.copyright {
  text-align: center;
  font-size: 14px;
}
</style>